<template>
  <div>
    <PartLabel :label="label" class="mb-[20px]" />
    <div ref="mapContainer" class="map-container"></div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import PartLabel from '@/components/portal/PartLabel.vue'
import parkIcon from '@/assets/img/park.png'
export default Vue.extend({
  components: { PartLabel },
  props: {
    label: {
      type: String,
      default: 'Part Name',
    },
    lngLat: {
      type: String,
      default: '123213,4535',
    },
    name: {
      type: String,
      default: '',
    },
    geojson: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      map: null,
    }
  },
  mounted() {
    if (process.browser) {
      if (!this.map) {
        const that = this
        this.$AMapLoader
          .load({
            key: 'e545eca006285231e8cc0af65862861e',
            version: '2.0',
            plugins: [
              'AMap.Scale',
              'AMap.Autocomplete',
              'AMap.ToolBar',
              'AMap.Geolocation',
              'AMap.Geocoder',
              'AMap.GeoJSON',
            ],
            AMapUI: {
              version: '1.1',
              plugins: ['misc/PoiPicker'],
            },
            Loca: {
              version: '2.0.0', // Loca 版本，缺省 1.3.2
            },
          })
          .then(() => {
            that.initAMap()
            that.addMarker()
            that.addPolygon()
          })
          .catch((e) => {
            console.log(e)
          })
      } else {
        this.addMarker()
        this.addPolygon()
      }
    }
  },
  methods: {
    addPolygon() {
      const { geojson, map } = this
      const { AMap } = window
      if (!geojson) return
      let pm = ''
      fetch(geojson)
        .then((res) => res.json())
        .then((jsonObj) => {
          const pl = new AMap.GeoJSON({
            geoJSON: jsonObj,
            // 还可以自定义getMarker和getPolyline
            getPolyline: (json, lnglats) => {
              const polygon = new AMap.Polyline({
                path: lnglats,
                strokeWeight: 5,
                fillOpacity: 1,
                fillColor: '#0091ff',
                strokeColor: '#f00',
                strokeStyle: 'dashed', // 轮廓线样式，实线:solid 虚线:dashed
                bubble: true,
                // cursor: 'pointer'
              })
              pm = polygon
              return polygon
            },
          })
          map.add(pl)

          pm && map.setFitView(pm)
        })
    },
    addPolygon2() {
      const { geojson, map } = this
      if (!geojson) return

      const loca = new Loca.Container({
        map,
      })

      const geoSource = new window.Loca.GeoJSONSource({
        url: this.geojson,
      })

      const pl = new window.Loca.LineLayer({
        loca,
        zIndex: 120,
        opacity: 0.8,
      })

      pl.setSource(geoSource)
      pl.setStyle({
        color: '#0062ff',
        lineWidth: 5,
        dash: [10, 20, 10, 20],
      })

      pl.setFitView()
    },
    addMarker() {
      const { AMap } = window
      const { lngLat } = this

      const position = lngLat.split(',')
      const icon = new AMap.Icon({
        size: new AMap.Size(40, 40), // 图标尺寸
        image: parkIcon,
        imageSize: new AMap.Size(40, 40), // 根据所设置的大小拉伸或压缩图片
      })

      // 将 Icon 实例添加到 marker 上:
      const marker = new AMap.Marker({
        position: new AMap.LngLat(position[0], position[1]),
        offset: new AMap.Pixel(-10, -10),
        icon, // 添加 Icon 实例
        title: this.name,
        zoom: 8,
      })

      const text = new AMap.Text({
        text: this.name,
        anchor: 'top-center', // 设置文本标记锚点
        // draggable: true,
        offset: [0, 40],
        style: {
          padding: '5px 10px',
          'border-radius': '8px',
          'background-color': 'white',
          'border-width': 0,
          'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
          'text-align': 'center',
          'font-size': '14px',
          color: 'blue',
        },
        position,
      })

      this.map.add(marker)
      this.map.add(text)
      this.map.setCenter(position)
    },
    initAMap() {
      const { AMap } = window
      const map = (this.map = new AMap.Map(this.$refs.mapContainer, {}))

      this.geocoder = new AMap.Geocoder()
      map.addControl(new AMap.Scale())
      map.addControl(new AMap.ToolBar())
    },
  },
})
</script>
<style lang="scss" scoped>
.map-container {
  width: 100%;
  height: 400px;
  border-radius: 6px;
}
</style>
